import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { BannerMock, BannerUserMock } from './mock'
import SearchView from '../../SearchView'
import { Link } from 'react-router-dom'
import { PublicService } from '../../../transfer/service/PublicService'
import { UserService } from '../../../transfer/service/UserService'

export default function EditorialBanner() {
    const [banner, setBanner] = useRecoilState(BannerMock)
    const [user, setUser] = useRecoilState(BannerUserMock)
    const [searchHeight, setSearchHeight] = useState<any>()

    // 初始化布局
    useEffect(() => {
        setSearchHeight($(`.${style.mask}`).outerHeight(true)! - $(`.${style.user__info}`).outerHeight(true)! + 'px')
    }, [])

    useEffect(() => {
        new PublicService().getRecommends(0, 1).then(res => {
            if (res.data.data.length != 0) {
                setBanner(res.data.data[0])
                new UserService().getProfile(res.data.data[0].userId).then(user => {
                    setUser(user.data.data)
                })
            }
        })
    }, [])

    return (
        <div
            className={style.container}
            style={{
                ['--search-height' as any]: searchHeight
            }}>
            <div className={style.mask}>
                <div className={style.search__container}>
                    <p>LineView</p>
                    <span>
                        互联网上免费使用的 <Link to={'/license'}>图片来源</Link>。
                    </span>
                    <span>到处都是创造者。</span>
                    <div className={style.search}>
                        <SearchView
                            width={'0'}
                            height={'1.45rem'}
                            searchWidth={'20px'}
                            clearWidth={'16px'}
                            borderRadius={'4px'}
                            placeHolder={'搜索高分辨率图片在LineView'}
                        />
                    </div>
                </div>
                <div className={style.user__info}>
                    <span>
                        该 <Link to={'/photos/' + banner.id}>作品</Link> 由摄影师：{' '}
                        <Link to={'/user/photos/' + banner.userId}>{user.profile.nickName}</Link>
                    </span>
                    <span>
                        详情请点击 <Link to={'/license'}> LineView License</Link>
                    </span>
                </div>
            </div>
            <div className={style.back__ground}>
                <img src={'http://localhost:3000/' + banner.imageUrl} />
            </div>
        </div>
    )
}
